<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/icon/info.niwota.frames">
<title>E*Frame</title>
<base href="/content/info.niwota.frames/" target="_self" >

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">
<style type="text/css">
.section-title {
	padding-left: 64px; 
	padding-right: 64px; 
	padding-bottom: 16px; 
	clear: left;
	font-size: large;
}

.section {
	padding-left: 64px; 
	padding-right: 64px; 
	clear: left;
}

.frame-item a:link, .frame-item a:visited, .frame-item a:active, .frame-item a:hover {
	text-decoration: none;
	color: #fff;
}

.frame-item a:hover {
	color: #000;
	background-color: orange;
} 

</style>

<!-- -->

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/carousel/assets/skins/sam/carousel.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/paginator/assets/skins/sam/paginator.css" />

<style type="text/css">
	body {
		margin:0;
		padding:0;
	}

    #spotlight {
        border: 1px solid #ccc;
        height: 320px;
        margin: 10px auto;
        padding: 1px;
        text-align: center;
        width: 320px;
    }

    #carousel {
        margin: 0;
    }

    #container {
        margin: 0 auto;
    }

    .yui-skin-sam .yui-carousel-nav ul,
    .yui-skin-sam .yui-carousel-nav select {
        display: none;
    }
    /* Always be sure to give your carousel items a width and a height */
    .yui-carousel-element li {
        height: 75px;
        width: 75px;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/element/element-min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/carousel/carousel-min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/paginator/paginator-min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.8.2/build/connection/connection-min.js"></script>

<!-- -->
<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>

<script type="text/javascript">
var imageCount = 0;
var imageUris = [];

function getItems(size, from) {
	var to = Math.min(imageCount, from + size);
	return imageUris.slice(from, to);
}	
</script>

<script type="text/javascript">
$(document).ready(function(){
	$.initOptionMenu();
	//
	$.getScript('/content/info.niwota.frames/bin/load/frame?uri=' + window.location.href, function(){  
		$("#spinner").show();
		initFrame();
		$("#spinner").hide();
	}); 
});
</script>

<script type="text/javascript">

function getImageTag(img) {
    return "<img src=\"/content/info.niwota.frames/bin/image?uri=" + encodeURIComponent(img) + "\" height=\"75\" width=\"75\">";
}

function getImages(o) {
    var carousel = this;
    var revealEnabled = carousel.get("revealAmount");
    var numVisible = carousel.get("numVisible");
    var curpos = o.num > numVisible + (revealEnabled?1:0) ? o.last - (o.last % numVisible) : o.first;
	//
	var i = curpos;
    var j = 0;
    var r = getItems(numVisible, curpos);
    var item;
    var loadingItems;

    curpos += r.length;

    while (i < curpos) {
        if (r[j]) {
            item = getImageTag(r[j]);
            loadingItems = carousel.getLoadingItems();
            if(loadingItems[i]){
                carousel.replaceItem(item,i);
            } else {
                carousel.addItem(item);
            }
        } else {
            break;
        }
        i++;
        j++;
	}

	carousel.set("selectedItem", carousel.get("firstVisible"));
}

function getImage(parent) {
    var el = parent.firstChild; 
    while (el) { 
        if (el.nodeName.toUpperCase() == "IMG") {
            return el.src;
        }
        el = el.nextSibling;
    }
    return "";
}
        
function load(carousel, numVisible) {
  	var i; 
    var r = getItems(numVisible, 0);
    var curpos = r.length;
    var items = [];
    for (i = 0; i < curpos; i++) {
        items.push(r[i]);
    }
    if (typeof carousel != "undefined") {
        for (i = 0; i < curpos; i++) {
            carousel.addItem(getImageTag(items[i]));
        }
        carousel.set("selectedItem", 0);
    }
}

//
function initFrame() { 
    YAHOO.widget.Carousel.prototype.CONFIG.MAX_PAGER_BUTTONS = 100;
	var spotlight = YAHOO.util.Dom.get("spotlight");
    var carousel = new YAHOO.widget.Carousel("container", {
        numItems: imageCount,
        numVisible: 5,
        isCircular: false
    });
	var numItems   = carousel.get("numItems");
    var numVisible = carousel.get("numVisible");
  	// 
	load(carousel, numVisible);
	//
    carousel.on("loadItems", function (o) {
        getImages.call(this, o);
    });
      
    carousel.on("itemSelected", function (index) {
        var item = carousel.getElementForItem(index);
        if (item) {
            spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
        }
    });
    
    //
    $(".yui-carousel-nav").hide();
    //
    carousel.render();
    carousel.show();
    //
    var paginator = new YAHOO.widget.Paginator({
            containers   : "pagination",
            rowsPerPage  : 1,
            template     : "{PreviousPageLink} "  +
                           "{PageLinks} " +
                           "{NextPageLink}",
            totalRecords : Math.ceil(numItems / numVisible)
    });

    paginator.subscribe("changeRequest", function (state) {
        carousel.set("selectedItem", (state.page - 1) * numVisible);
        paginator.setState(state);
    });

    carousel.on("pageChange", function (page) {
        paginator.setPage(page + 1, true);
    });
    
    paginator.render();
}
</script>

</head>
<body class="yui-skin-sam" >

<div id="topnav">
	<span class="action" >
	<img class="icon32" src="/icon/info.niwota.frames"  style="margin-top: 0px;">
	<a href="/content/info.niwota.frames/bin/frames">
	<span style="color: #000; font-size: x-large; vertical-align: middle;">E*Frame</span>
	</a>
	</span>	

	<span class="top-right" style="margin-right: 64px;">
	
	<span class="action"><a href="/content/info.niwota.frames/bin/frames">Frames</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="/content/info.niwota.frames/bin/help" target="_help" >Help</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="#" onclick="self.close();">Quit</a></span>

	</span>
	<div>
	<img src="/image/divider_horizontal_light.png" style="vertical-align: bottom; clear: both; display: inline; width: 90%; height: 2px;" />
	</div>
</div>

<!--page content-->
<div id="page-content">

<div class="section"> 

<div id="spotlight"></div> 

</div>

</div>
<!--//page content-->

<div class="bottom-center" style="z-index: 201;">
<div id="spinner"><img src="/image/spin.gif" alt="Please wait..." /></div>
<div id="container"> 
	<ol id="carousel"></ol>
</div> 
</div>
<div class="bottom-right" style="z-index: 202;">
<div id="pagination"></div>
</div>

<!-- -->

<div id="optionmenu" style="visibility:hidden;">
<span><a id="optionmenu-open" style="color: #fff; font-size: xx-large; vertical-align: top;" href="#">&nbsp;&raquo;&nbsp;</a></span>
<span id="optionmenu-items" >
<a class="optionmenu-item" href="/content/info.niwota.frames/bin/frames" title="Frames"><img src="/image/ic_menu_archive.png" class="icon48" /></a>
<a class="optionmenu-item" href="/content/info.niwota.frames/bin/help" target="_help" title="Help"><img src="/image/ic_menu_help.png" class="icon48" /></a>
<a class="optionmenu-item" href="#" title="Quit" onclick="self.close();"><img src="/image/ic_menu_done.png" class="icon48" /></a>
</span>
<span><a id="optionmenu-close" style="color: #fff; font-size: xx-large; vertical-align: top;" href="#"><span>&laquo;&nbsp;&nbsp;</span></a></span>
</div>

<div id="footer">
<div>
<img src="/image/divider_horizontal_light.png" style="vertical-align: bottom; clear: both; display: inline; width: 90%; height: 2px;" />
</div>
E*Frame &copy; 2010 All rights reserved
</div>

<!-- 
<div id="wallpaper" style="display: block;"><img src="/image/black.png" width="100%" height="100%" /></div>
-->
<div id="wallpaper" style="display: block;"><img src="" width="100%" height="100%" /></div>

</body>
</html>